<template>
    <!-- 商品信息展示组件 -->
    <div class="top-panel">
        <el-card>
            <el-form :model="searchForm" label-width="70px" label-position="right">
                <el-row>
                    <el-col :span="13">
                        <el-form-item label="搜索关键字:" label-width="100px">
                            <el-autocomplete v-model="searchForm.key" :fetch-suggestions="querySuggests"
                                placeholder="请输入关键字" clearable @keyup.enter="loadDataList"></el-autocomplete>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="最低价格(元):" label-width="120px">
                            <el-input v-model="searchForm.minPrice" clearable @keyup.enter="loadDataList"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="最高价格(元):" label-width="120px">
                            <el-input v-model="searchForm.maxPrice" clearable @keyup.enter="loadDataList"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1" :style="{ paddingLeft: '40px' }"><el-button type="success"
                            @click="loadDataList()">搜索</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
    <el-card class="table-data-card">
        <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
            <template #slotName="{ row }">
                <div v-html="row.highlightedName == null ? row.name : row.highlightedName"></div>
            </template>
            <template #slotImage="{ row }">
                <el-image :src="row.image" fit="scale-down" style="width: 80px;">
                    <template #error>
                        <div class="iconfont icon-shangpin"></div>
                    </template>
                </el-image>
            </template>
            <template #slotPrice="{ row }">
                <!-- 分->元 -->
                <span>{{ row.price / 100 }}</span>
            </template>
            <template #slotOperation="{ row }">
                <el-button type="primary" @click="addToCart(row)" size="small">加入购物车</el-button>
            </template>
        </Table>
    </el-card>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const querySuggests = async (queryString, cb) => {
    let result = await proxy.Request({
        url: proxy.Api.querySuggestion,
        params: {
            prefix: queryString
        }
    })
    if (!result) {
        return;
    }
    cb(result.data)
}

const addToCart = async (row) => {
    let result = await proxy.Request({
        method: "post",
        url: proxy.Api.addToCart,
        params: {
            itemId: row.id,
            name: row.name,
            spec: row.spec,
            price: row.price,
            image: row.image,
        }
    })
    if (!result) {
        return;
    }
    proxy.Message.success("添加成功！")
}

const tableData = ref({
    pageNo: 1,
    pageSize: 15,
})
const tableOptions = {}
const searchForm = ref({})

const loadDataList = async () => {
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize
    }
    params = Object.assign(params, searchForm.value)
    // 元->分
    if (params.minPrice) params.minPrice = 100 * params.minPrice
    if (params.maxPrice) params.maxPrice = 100 * params.maxPrice
    let result = await proxy.Request({
        url: proxy.Api.searchItem,
        params: params
    })
    if (!result) {
        return;
    }
    Object.assign(tableData.value, result.data)
    tableData.value.totalCount = result.data.total
}

const columns = [
    {
        label: '图片',
        prop: 'image',
        scopedSlots: 'slotImage',
        width: 120
    },
    {
        label: '名称',
        prop: 'name',
        scopedSlots: 'slotName',
        width: 700
    },
    {
        label: '价格(元)',
        prop: 'price',
        scopedSlots: 'slotPrice'
    },
    {
        label: '销量',
        prop: 'sold'
    },
    {
        label: '操作',
        prop: 'operation',
        width: 150,
        scopedSlots: 'slotOperation'
    },
]

</script>

<style lang="scss" scoped>
.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
<style>
em {
    color: #f56c6c;
}
</style>
